<%--
  Created by IntelliJ IDEA.
  User: Mr_C
  Date: 2017/3/13
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/views/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>${title}</title>
    <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <%--<script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>--%>
    <%--<script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>
    <script src="${ctx}/js/jquery.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/bootstrap.min.css">
    <script src="${ctx}/js/bootstrap.min.js"></script>
    <link href="${ctx}/js/jPlayer/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="${ctx}/js/jPlayer/dist/jplayer/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="${ctx}/js/jPlayer/dist/add-on/jplayer.playlist.min.js"></script>

    <style type="text/css">
        /* Custom Styles */
        ul.nav-tabs{
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        ul.nav-tabs li{
            margin: 0;
            border-top: 1px solid #ddd;
        }
        ul.nav-tabs li:first-child{
            border-top: none;
        }
        ul.nav-tabs li a{
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        ul.nav-tabs li:first-child a{
            border-radius: 4px 4px 0 0;
        }
        ul.nav-tabs li:last-child a{
            border-radius: 0 0 4px 4px;
        }
        ul.nav-tabs.affix{
            top: 30px; /* Set the top position of pinned element */
        }
        .m{ margin-left: auto; margin-right: 100px; width: 100%;height: 400px;margin-top: 100px}
        .video-js{width: 100%}

        #playlist li {
            color: blue;
            text-decoration: underline;
        }
        #playlist li:hover {
            color: black;
            cursor: pointer;
        }
        .apdText{
            font-size: 20px;
    </style>

    <script type="text/javascript">
        function initJPlayer(player_id, container_id, video_count, loc, poster_loc){
            var list = []
            for(var i = 0; i<video_count; i++){
                var title = "";
                if(i==0){
                    title="当前视频";
                }else{
                    title="视频"+i;
                }
                var play={
                    title:title,
                    artist:"Santiago Pet Hospital",
                    free:true,
                    m4v: "${vtx}"+loc[i],
                    poster:"${vtx}"+poster_loc[i]
                };
                list.push(play);
            }
            new jPlayerPlaylist({
                jPlayer: player_id,
                cssSelectorAncestor: container_id,
                m4v: "${vtx}"+loc[0],
                poster:"${vtx}"+poster_loc[0]
            }, list, {
                swfPath: "${ctx}/dist/jplayer",
                supplied: "webmv, ogv, m4v",
                useStateClassSkin: true,
                autoBlur: false,
                smoothPlayBar: true,
                keyEnabled: true
            });
        }
        function initImageContainer(i){
            $("#section-"+i).append("<div id='myCarouse"+i+"' class='carousel slide'>\n" +
                    "<ol class='carousel-indicators' id='indicators-"+i+"'></ol>\n" +
                    "<div class='carousel-inner' id='inner-"+i+"'></div>\n" +
                    "<a class='left carousel-control' href='#myCarouse"+i+"' role='button' data-slide='prev'>\n" +
                    "<span class='glyphicon glyphicon-chevron-left' aria-hidden='true'></span>\n" +
                    "<span class='sr-only'>Previous</span>\n" +
                    "</a>\n" +
                    "<a class='right carousel-control' href='#myCarouse"+i+"' role='button' data-slide='next'>\n" +
                    "<span class='glyphicon glyphicon-chevron-right' aria-hidden='true'></span>\n" +
                    "<span class='sr-only'>Next</span>\n" +
                    "</a>\n" +
                    "</div>")
        }

        function loadJPlayer(i){
            $("#section-"+i).append("<div id='jp_container_"+i+"' class='jp-video jp-video-270p' role='application' aria-label='media player'></div>");
            $("#jp_container_"+i).append("<div class='jp-type-playlist' id='jp-type-playlist-"+i+"'></div>");
            $("#jp-type-playlist-"+i).append("<div id='jquery_jplayer_"+i+"' class='jp-jplayer'></div>");
            $("#jp-type-playlist-"+i).append("<div class='jp-gui' id='jp-gui-"+i+"'>");
            $("#jp-gui-"+i).append("<div class='jp-video-play'>\n"+
                    "<button class='jp-video-play-icon' role='button' tabindex='0'>play</button>\n"+
                    "</div>");
            $("#jp-gui-"+i).append("<div class='jp-interface'>\n"+
                    "<div class='jp-progress'>\n"+
                    "<div class='jp-seek-bar'>\n" +
                    "<div class='jp-play-bar'></div>\n" +
                    "</div>\n" +
                    "</div>\n" +
                    "<div class='jp-current-time' role='timer' aria-label='time'>&nbsp;</div>\n" +
                    "<div class='jp-duration' role='timer' aria-label='duration'>&nbsp;</div>\n" +
                    "<div class='jp-controls-holder'>\n" +
                    "<div class='jp-controls'>\n" +
                    "<button class='jp-previous' role='button' tabindex='0'>previous</button>\n" +
                    "<button class='jp-play' role='button' tabindex='0'>play</button>\n" +
                    "<button class='jp-next' role='button' tabindex='0'>next</button>\n" +
                    "<button class='jp-stop' role='button' tabindex='0'>stop</button>\n" +
                    "</div>\n" +
                    "<div class='jp-volume-controls'>\n" +
                    "<button class='jp-mute' role='button' tabindex='0'>mute</button>\n" +
                    "<button class='jp-volume-max' role='button' tabindex='0'>max volume</button>\n" +
                    "<div class='jp-volume-bar'>\n" +
                    "<div class='jp-volume-bar-value'></div>\n" +
                    "</div>\n" +
                    "</div>\n" +
                    "<div class='jp-toggles'>\n" +
                    "<button class='jp-repeat' role='button' tabindex='0'>repeat</button>\n" +
                    "<button class='jp-shuffle' role='button' tabindex='0'>shuffle</button>\n" +
                    "<button class='jp-full-screen' role='button' tabindex='0'>full screen</button>\n" +
                    "</div>\n" +
                    "</div>\n" +
                    "<div class='jp-details'>\n" +
                    "<div class='jp-title' aria-label='title'>&nbsp;</div>\n" +
                    "</div>\n" +
                    "</div>\n");
            $("#jp-type-playlist-"+i).append("<div class='jp-playlist'>\n" +
                    "<ul>\n" +
                    "<li>&nbsp;</li>\n" +
                    "</ul>\n" +
                    "</div>\n" +
                    "<div class='jp-no-solution'>\n" +
                    "<span>Update Required</span>\n" +
                    "To play the media you will need to either update your browser to a recent version or update your <a href='http://get.adobe.com/flashplayer/' target='_blank'>Flash plugin</a>\n" +
                    "</div>\n")
        }
        function loadImageContainer(i, piccount, picloc){
            for(var j=0; j<piccount;j++){
                if(j==0) {
                    //加载图片下方控制点
                    $("#indicators-"+i).append("<li data-target='#myCarouse"+i+"' data-slide-to=\"0\" class=\"active\"></li>")
                    //加载图片内容
                    $("#inner-"+i).append("<div class=\"item active\">\n"+
                            "<img src=\"${vtx}"+picloc[j]+"\" alt=\""+j+"\">\n"+
                            "</div>");
                }else{
                    $("#indicators-"+i).append("<li data-target='#myCarouse"+i+"' data-slide-to=\""+j+"\"></li>")
                    $("#inner-"+i).append("<div class=\"item\">\n"+
                            "<img src=\"${vtx}"+picloc[j]+"\" alt=\""+j+"\">\n"+
                            "</div>");
                }
            }
        }

        $(document).ready(function() {
            //加载系统模板
            $.ajax({
                url: '${ctx}/case/getCaseDetail',
                type: 'POST',
                data:{
                    case_id:'${case_id}'
                },
                dataType: 'json',
                success: function(responseText) {
                    //此处加载各种文章信息
                    $("#jumtitle").append("<h1>"+responseText.case_name_dis+"</h1>");
                    $("#section-1").append("<p class='apdText'>"+"<br/>"+responseText.case_name_dis+"</p>");
                    $("#section-2").append("<p class='apdText'>"+"<br/>"+responseText.treatment_dis+"</p>");
                    $("#section-3").append("<p class='apdText'>"+"<br/>"+responseText.inspect_dis+"</p>");
                    $("#section-4").append("<p class='apdText'>"+"<br/>"+responseText.diag_dis+"</p>");
                    $("#section-5").append("<p class='apdText'>"+"<br/>"+responseText.treat_dis+"</p>");

                    //此处加载各种图片信息
                    for(var i=1; i<=5;i++){
                        $("#section-"+i).append("<h3>图片示例</h3>");
                    }

                    //加载病例名
                    if(responseText.case_name_pic_loc_count>0){
                        initImageContainer(1);
                        loadImageContainer(1, responseText.case_name_pic_loc_count, responseText.case_name_pic_loc);
                    }else{
                        $("#section-1").append("<h4>暂无图片资源</h4>");
                    }

                    //加载接诊要点
                    if(responseText.treatment_pic_loc_count>0){
                        initImageContainer(2);
                        loadImageContainer(2, responseText.treatment_pic_loc_count, responseText.treatment_pic_loc);
                    }else{
                        $("#section-2").append("<h4>暂无图片资源</h4>");
                    }

                    //加载病例检查
                    if(responseText.inspect_pic_loc_count>0){
                        initImageContainer(3);
                        loadImageContainer(3, responseText.inspect_pic_loc_count, responseText.inspect_pic_loc);
                    }else{
                        $("#section-3").append("<h4>暂无图片资源</h4>");
                    }

                    //加载诊断结果
                    if(responseText.diag_pic_loc_count>0){
                        initImageContainer(4);
                        loadImageContainer(4, responseText.diag_pic_loc_count, responseText.diag_pic_loc);
                    }else{
                        $("#section-4").append("<h4>暂无图片资源</h4>");
                    }

                    //加载治疗方案
                    if(responseText.treat_pic_loc_count>0){
                        initImageContainer(5);
                        loadImageContainer(5, responseText.treat_pic_loc_count, responseText.treat_pic_loc);
                    }else{
                        $("#section-5").append("<h4>暂无图片资源</h4>");
                    }

                    for(var i=1; i<=5;i++){
                        $("#section-"+i).append("<br/>");
                        $("#section-"+i).append("视频详解");
                    }

                    //初始化播放器
                    if(responseText.case_name_vio_loc_count>0){
                        loadJPlayer(1);
                        initJPlayer("#jquery_jplayer_1","#jp_container_1", responseText.case_name_vio_loc_count, responseText.case_name_vio_loc, responseText.case_name_viothb_loc);
                    }else{
                        $("#section-1").append("<h4>暂无视频资源</h4>");
                    }
                    if(responseText.treatment_vio_loc_count>0){
                        loadJPlayer(2);
                        initJPlayer("#jquery_jplayer_2","#jp_container_2", responseText.treatment_vio_loc_count, responseText.treatment_vio_loc, responseText.treatment_viothb_loc);
                    }else{
                        $("#section-2").append("<h4>暂无视频资源</h4>");
                    }

                    if(responseText.inspect_vio_loc_count>0) {
                        loadJPlayer(3);
                        initJPlayer("#jquery_jplayer_3", "#jp_container_3", responseText.inspect_vio_loc_count, responseText.inspect_vio_loc, responseText.inspect_viothb_loc);
                    }else{
                        $("#section-3").append("<h4>暂无视频资源</h4>");
                    }

                    if(responseText.diag_vio_loc_count>0) {
                        loadJPlayer(4);
                        initJPlayer("#jquery_jplayer_4", "#jp_container_4", responseText.diag_vio_loc_count, responseText.diag_vio_loc, responseText.diag_viothb_loc);
                    }else{
                        $("#section-4").append("<h4>暂无视频资源</h4>");
                    }
                    if(responseText.treat_vio_loc_count>0) {
                        loadJPlayer(5);
                        initJPlayer("#jquery_jplayer_5", "#jp_container_5", responseText.treat_vio_loc_count, responseText.treat_vio_loc, responseText.treat_viothb_loc);
                    }else{
                        $("#section-5").append("<h4>暂无视频资源</h4>");
                    }
                }
            });

        });
    </script>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
    <div class="jumbotron" id="jumtitle">
    </div>
    <div class="row">
        <div class="col-xs-3" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                <li class="active"><a href="#section-1">病例名称</a></li>
                <li><a href="#section-2">接诊要点</a></li>
                <li><a href="#section-3">病例检查</a></li>
                <li><a href="#section-4">诊断结果</a></li>
                <li><a href="#section-5">治疗方案</a></li>
            </ul>
        </div>
        <div class="col-xs-9">
            <h2 id="section-1">病例名称</h2>

            <hr>
            <h2 id="section-2">接诊要点</h2>

            <hr>
            <h2 id="section-3">病例检查</h2>

            <hr>
            <h2 id="section-4">诊断结果</h2>

            <hr>
            <h2 id="section-5">治疗方案</h2>

            <hr>
        </div>
    </div>
</div>
</body>
</html>
